<!-- 文章卡片 -->
<template>
    <div class="container" @click="goPage(cardInfo)">
        <!-- 封面 -->
        <div class="image">
            <el-image class="el-image" :src="cardInfo.articleCover" fit="cover"></el-image>
        </div>
        <div class="main">
            <!-- 时间 -->
            <ArticleReleaseTime :createdAt="cardInfo.createdAt"></ArticleReleaseTime>
            <!-- 标题 -->
            <h3 class="sle">{{ cardInfo.articleTitle }}</h3>
            <!-- 文章信息 -->
            <ArticleInfo 
            :viewsCount="cardInfo.viewsCount"
            :commentsCount="cardInfo.commentsCount"
            :like="cardInfo.like"></ArticleInfo>
            <!-- 摘要 -->
            <p class="tle">{{ cardInfo.articleSummary }}</p>
            <!-- 标签 -->
            <ArticleTag :tags="cardInfo.tags" :tagLength="2" :isGoTagPage="isGoTagPage"></ArticleTag>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import ArticleInfo from '@/components/article/article-info/article-info.vue';
import ArticleTag from '@/components/article/article-tag/article-tag.vue';
import ArticleReleaseTime from '@/components/article/article-release-time/article-release-time.vue';

// ========================= 接收值 =========================
const props = defineProps({
    // 文章信息
    cardInfo: {
        type: Object,
        default: () => {}
    },

    // 是否需要跳转页面
    isGoDetailPage: {
        type: Boolean,
        default: true
    },

    // ========================= 标签组件 =========================
    // 是否需要跳转页面
    isGoTagPage: {
        type: Boolean,
        default: true
    }
})

// ========================= 路由操作 =========================
const router = useRouter(); // 路由
function goPage(item) {
    if(!props.isGoDetailPage) return;
    router.push({
        path: '/article/detail',
        query: {
            id: item.id
        }
    })
};
</script>

<style lang="scss" scoped>
    @import '@/theme/animations';
    @import "./article-card.scss";
</style>